<template>
	<view class="bg">

		<view class="data_null" v-if="!isDataShow">
			请选择您所在的省份和城市查询天气情况...
		</view>

		<view class="show_area" v-if="isDataShow">
			<view class="today_data">
				<view class="temperature">
					{{temperature}}
				</view>
				<view class="max_min_temperature">
					<view class="min_temperature">
						<text class="min_temperature_title">最低气温：</text><text
							class="min_temperature_data">{{minTemperature}}</text>
					</view>
					<view class="max_temperature">
						<text class="max_temperature_title">最高气温：</text><text
							class="max_temperature_data">{{maxTemperature}}</text>
					</view>
				</view>
			</view>
			<view class="today_other">
				<view class="air_weather">
					<view class="air_quantity">
						<text class="air_quantity_title">空气质量：</text><text
							class="air_quantity_data">{{airQuantity}}</text>
					</view>
					<view class="weather_type">
						<text class="weather_type_title">天气：</text><text
							class="weather_type_data">{{weatherType}}</text>
					</view>
				</view>
				<view class="sun">
					<view class="sunrise">
						<text class="sunrise_title">日出时间：</text><text class="sunrise_data">{{sunrise}}</text>
					</view>
					<view class="sunset">
						<text class="sunset_title">日落时间：</text><text class="sunset_data">{{sunset}}</text>
					</view>
				</view>
			</view>
			<view class="other_day">
				<view class="tomorrow">
					<view class="tomorrow_temperature">
						<view class="tomorrow_title">
							明天
						</view>
						<text class="tomorrow_max_temperature">{{otherDay[0].high}}</text>
						~
						<text class="tomorrow_min_temperature">{{otherDay[0].low}}</text>
					</view>
					<view class="tomorrow_weather_wind">
						<text class="other_day_type">{{otherDay[0].type}}</text>
						<text class="other_day_fx">{{otherDay[0].fx}}{{otherDay[0].fl}}</text>
					</view>
				</view>
				<view class="day_after_tomorrow">
					<view class="after_tomorrow_temperature">
						<view class="day_after_tomorrow_title">
							后天
						</view>
						<text class="after_tomorrow_max_temperature">{{otherDay[1].high}}</text>
						~
						<text class="after_tomorrow_min_temperature">{{otherDay[1].low}}</text>
					</view>
					<view class="after_tomorrow_weather_wind">
						<text class="after_tomorrow_type">{{otherDay[1].type}}</text>
						<text class="after_tomorrow_wind">{{otherDay[1].fx}}{{otherDay[1].fl}}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="stick_bottom">
			<view class="province">
				选择省份
			</view>
			<uni-combox label="省份" labelWidth="40px" :candidates="provinces" placeholder="请选择所在省份" v-model="province"
				@update:modelValue="getCity"></uni-combox>
			<view class="city">
				选择城市
			</view>
			<uni-combox label="城市" labelWidth="40px" :candidates="cityNames" placeholder="请选择所在城市" v-model="city">
			</uni-combox>
			<view class="btn">
				<button @click="getWeatherFunc">获取天气</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		citys
	} from '../../static/js/city.js'
	export default {
		data() {
			return {
				isDataShow: false, // 数据显示与否
				temperature: '0℃', // 温度
				minTemperature: '0℃', // 最低气温
				maxTemperature: '0℃', // 最高气温
				airQuantity: '优', // 空气质量
				weatherType: '晴', // 天气类型
				sunrise: '07:30', // 日出时间
				sunset: '18:30', // 日落时间
				otherDay: [], // 明天和后天的天气情况
				province: '', // 所在省份
				city: '', // 所在城市
				provinces: ['四川', '云南', '贵州', '浙江', '广东'], // 省
				cityNames: ['昆明', '曲靖', '玉溪', '大理', '昭通', '文山', '普洱'], // 市
			}
		},
		onLoad() {
			// 获取省数组
			this.getProvinceArray();
			// 加载分享菜单
			this.loadingShareMenu();
		},
		methods: {
			// 获取省数组，市数组
			getProvinceArray() {
				const _this = this;
				_this.provinces = [];
				citys.forEach(item => {
					_this.provinces.push(item.province);
				})
			},
			// 省份更新获取城市
			getCity() {
				const _this = this;
				_this.cityNames = [];
				let cityItem = citys.find(item => item.province === this.province);
				if (typeof cityItem !== 'undefined') {
					console.log(cityItem);
					cityItem.city.forEach(item => _this.cityNames.push(item.cityName));
				}
			},
			// 点击按钮获取天气
			getWeatherFunc() {
				const _this = this;
				if (_this.province === '') {
					uni.showToast({
						icon: 'error',
						title: '请先选择省份',
						duration: 1000,
					})
				} else if (_this.city === '') {
					uni.showToast({
						icon: 'error',
						title: '请先选择城市',
						duration: 1000,
					})
				} else {
					let cityItem = citys.find(item => item.province === _this.province);
					if (typeof cityItem === 'undefined') {
						uni.showToast({
							icon: 'error',
							title: '不存在该省份',
							duration: 1000,
						})
					} else {
						let codeItem = cityItem.city.find(item => _this.city === item.cityName);
						if (typeof codeItem === 'undefined') {
							uni.showToast({
								icon: 'error',
								title: '不存在该城市',
								duration: 1000,
							})
						} else {
							uni.request({
								url: `http://t.weather.itboy.net/api/weather/city/${codeItem.cityCode}`,
								method: 'GET',
								success(res) {
									console.log(res);
									if (res.data.status === 200) {
										uni.showLoading({
											mask: true,
											title: '数据加载中...',
											duration: 800
										})
										_this.temperature = res.data.data.wendu + '℃';
										_this.minTemperature = res.data.data.forecast[0].low.substring(3)
										_this.maxTemperature = res.data.data.forecast[0].high.substring(3)
										_this.airQuantity = res.data.data.quality;
										_this.weatherType = res.data.data.forecast[0].type;
										_this.sunrise = res.data.data.forecast[0].sunrise;
										_this.sunset = res.data.data.forecast[0].sunset;
										_this.otherDay = [];
										_this.otherDay.push(res.data.data.forecast[1]);
										_this.otherDay.push(res.data.data.forecast[2]);
										_this.otherDay.forEach(item => {
											item.high = item.high.substring(3)
											item.low = item.low.substring(3)
										})
										setTimeout(() => {
											_this.isDataShow = true;
											uni.hideLoading()
										}, 800)
									} else {
										uni.showToast({
											icon: 'error',
											title: '请求失败，请稍后再试！',
											duration: 1000,
										})
									}
								},
								fail() {
									uni.showToast({
										icon: 'error',
										title: '请求失败，请稍后再试！',
										duration: 1000,
									})
								}
							})
						}
					}
				}
			},
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../static/css/basic.css');

	.data_null {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #b4b459;
		padding-top: 20px;
	}

	.show_area {
		width: 90%;
		height: 340px;
		padding: 10px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.today_data {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.temperature {
				font-size: 60px;
				font-weight: 600;
				color: #55aa7f;
			}

			.max_min_temperature {
				.min_temperature {
					.min_temperature_title {
						font-size: 18px;
						color: #3d00b8;
					}

					.min_temperature_data {
						font-size: 24px;
						font-weight: 600;
						color: #00adad;
					}
				}

				.max_temperature {
					.max_temperature_title {
						font-size: 18px;
						color: #d18b00;
					}

					.max_temperature_data {
						font-size: 24px;
						font-weight: 600;
						color: #ba3e5d;
					}
				}
			}
		}

		.today_other {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.air_weather {
				.air_quantity {
					.air_quantity_title {
						font-size: 18px;
						color: #5db8d3;
					}

					.air_quantity_data {
						font-size: 20px;
						color: #8484c6;
					}
				}

				.weather_type {
					.weather_type_title {
						font-size: 18px;
						color: #5db8d3;
					}

					.weather_type_data {
						font-size: 20px;
						color: #8484c6;
					}
				}
			}

			.sun {
				.sunrise {
					.sunrise_title {
						font-size: 18px;
						color: #4891da;
					}

					.sunrise_data {
						font-size: 18px;
						color: #da5692;
					}
				}

				.sunset {
					.sunset_title {
						font-size: 18px;
						color: #4891da;
					}

					.sunset_data {
						font-size: 18px;
						color: #da5692;
					}
				}
			}
		}

		.other_day {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20px;

			.tomorrow {
				.tomorrow_temperature {
					font-size: 20px;
					color: #4891da;

					.tomorrow_title {
						font-size: 15px;
						color: #00adad;
					}

					.tomorrow_max_temperature {
						font-size: 16px;
						color: #6edda4;
					}

					.tomorrow_min_temperature {
						font-size: 16px;
						color: #6edda4;
					}
				}

				.tomorrow_weather_wind {
					.other_day_type {
						margin-right: 10px;
						font-size: 20px;
						color: #aa557f;
					}

					.other_day_fx {
						font-size: 20px;
						color: #9999e6;
					}
				}
			}

			.day_after_tomorrow {
				.after_tomorrow_temperature {
					font-size: 20px;
					color: #4891da;

					.day_after_tomorrow_title {
						font-size: 15px;
						color: #00adad;
					}

					.after_tomorrow_max_temperature {
						font-size: 16px;
						color: #6edda4;
					}

					.after_tomorrow_min_temperature {
						font-size: 16px;
						color: #6edda4;
					}
				}

				.after_tomorrow_weather_wind {
					.after_tomorrow_type {
						margin-right: 10px;
						font-size: 20px;
						color: #aa557f;
					}

					.after_tomorrow_wind {
						font-size: 20px;
						color: #9999e6;
					}
				}
			}
		}
	}

	.stick_bottom {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;

		.province {
			width: 200px;
			margin-left: 10px;
			padding-top: 20px;
			font-size: 18px;
			font-weight: 600;
			color: #55aa7f;
			margin-bottom: 10px;
		}

		.city {
			margin-left: 10px;
			margin-top: 20px;
			font-size: 18px;
			font-weight: 600;
			color: #55aa7f;
			margin-bottom: 10px;
		}

		.btn {
			margin-top: 20px;

			button {
				width: 100%;
				font-size: 20px;
				font-weight: 600;
				letter-spacing: 5px;
				border-radius: 10px;
				background-color: #6edda4;
				color: #aa557f;
			}
		}
	}
</style>
